<template>
  <div>
    <div class="emoji-box" :style="{ height: height + 'px' }" >
      <div v-for="item in list" :key="item.codes" class="emoji-item">
        <img
          :src="initImgSrc(item)"
          :alt="item.name"
          class="s24 pointer"
          @click="clickHandler(item)"
        />
      </div>
    </div>
  </div>
</template>

<script>
const emojiData = require('./emoji.json');

export default {
  props: {
    height: {
      type: Number,
      default: 200,
    },
  },
  data() {
    return {
      list: emojiData,
    };
  },
  methods: {
    initImgSrc(item) {
      const curEnv = process.env.NODE_ENV === 'production' ? 'https://vue.learnerhub.net' : '';
      return `${curEnv}/static/emoji/${item.codes}.png`;
    },
    clickHandler(item) {
      this.$emit('emoji', `[${item.name}]`);
    },
  },
};
</script>

<style scoped>
.emoji-box {
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid #ffffff00;
  overflow: hidden;
  overflow-y: auto;

  display: flex;
  flex-wrap: wrap;
}

.emoji-item { padding: 4px; }
</style>
